import React, { useEffect, useRef } from 'react';
// 引入黑暗模式的样式文件，用于设置组件的样式
import '../../components/dark/index.scss'

// 定义一个名为 EmbedSDK 的函数组件
const EmbedSDK = () => {
  // 使用 useRef 创建一个 ref 对象，用于引用 DOM 元素
  // 这里将该 ref 用于指定 SDK 渲染的容器
  const embedContainerRef = useRef(null); 

  // 使用 useEffect 钩子来处理副作用，例如动态加载脚本和初始化 SDK
  useEffect(() => {
    // 动态创建一个 script 元素，用于加载 SDK 脚本
    const script = document.createElement('script');
    // 设置 script 元素的 src 属性，指定要加载的 SDK 脚本的 URL
    script.src = "https://agi-dev-platform-web.bj.bcebos.com/ai_apaas/embed/output/embedFullSDK.js?responseExpires=0";
    // 设置 script 元素的 async 属性为 true，表示脚本将异步加载
    script.async = true;

    // 为 script 元素的 onload 事件添加一个回调函数
    // 当脚本加载完成后，会执行该回调函数
    script.onload = () => {
      // 检查 window 对象上是否存在 EmbedWebSDK 变量，并且 embedContainerRef 指向的 DOM 元素存在
      if (window.EmbedWebSDK && embedContainerRef.current) {
        // 如果条件满足，创建一个新的 EmbedWebSDK 实例
        // 并传入配置对象，包括 appId、code 和要渲染的容器
        new window.EmbedWebSDK({
          appId: '3e145973-944f-4719-aec6-fa433ef5f534',
          code: 'embedNOlA8ucTAsIU5Fv71wk9',
          container: embedContainerRef.current // 将 SDK 渲染到 ref 指向的 DOM 元素
        });
      }
    };

    // 将创建的 script 元素插入到页面的 body 元素中，开始加载脚本
    document.body.appendChild(script); 

    // 返回一个清理函数，当组件卸载时执行
    // 清理函数的作用是移除之前插入的 script 元素，避免内存泄漏
    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空数组作为 useEffect 的第二个参数，表示这个副作用只会在组件挂载时执行一次

  return (
    // 渲染一个带有 'AI' 类名的 div 元素
    <div className='AI'>
      {/* 渲染一个 iframe 元素，用于在其中加载和运行 SDK */}
      <iframe
        // 为 iframe 元素设置一个标题，用于辅助设备识别
        title="Embed SDK"
        // 设置 iframe 的初始 src 属性为 'about:blank'，表示一个空白页面
        src="about:blank"
        // 为 iframe 元素添加 'AI-1' 类名，用于样式设置
        className='AI-1'
        // 使用 ref 回调函数来操作 iframe 的内容
        ref={(iframe) => {
          // 检查 iframe 元素是否存在，并且其 contentWindow 对象存在
          if (iframe && iframe.contentWindow) {
            // 在 iframe 的内容窗口中创建一个新的 script 元素
            const script = iframe.contentWindow.document.createElement('script');
            // 设置 script 元素的 src 属性，指定要加载的 SDK 脚本的 URL
            script.src = "https://agi-dev-platform-web.bj.bcebos.com/ai_apaas/embed/output/embedFullSDK.js?responseExpires=0";

            // 为 script 元素的 onload 事件添加一个回调函数
            // 当脚本在 iframe 中加载完成后，会执行该回调函数
            script.onload = () => {
              // 在 iframe 的内容窗口中创建一个新的 EmbedWebSDK 实例
              // 并传入配置对象，包括 appId、code 和要渲染的容器（即 iframe 的 body 元素）
              new iframe.contentWindow.EmbedWebSDK({
                appId: '3e145973-944f-4719-aec6-fa433ef5f534',
                code: 'embedNOlA8ucTAsIU5Fv71wk9',
                container: iframe.contentWindow.document.body
              });
            };

            // 将创建的 script 元素插入到 iframe 的 body 元素中，开始加载脚本
            iframe.contentWindow.document.body.appendChild(script);
          }
        }}
      />
    </div>
  );
};

// 导出 EmbedSDK 组件，以便在其他文件中使用
export default EmbedSDK; 